<template>
  <div class="search-div">
      <el-form label-width="70px" size="small">
          <el-row>
              <el-col :span="12">
                  <el-form-item label="品牌">
                      <el-select class="m-2" v-model="queryDto.brandId" placeholder="选择品牌" size="small"
                          style="width: 100%">
                          <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
                      </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="分类">
                      <el-cascader :props="categoryProps" style="width: 100%" v-model="searchCategoryIdList" />
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row style="display:flex">
              <el-button type="primary" size="small" @click="fetchData">
                  搜索
              </el-button>
              <el-button size="small" @click="resetData">重置</el-button>
          </el-row>
      </el-form>
  </div>

  <div class="tools-div">
      <el-button type="success" size="small" @click="addShow">添 加</el-button>
  </div>

  <el-table :data="list" style="width: 100%">
      <el-table-column prop="sliderUrls" label="轮播图" #default="scope" width="200">
          <div style="height: 50px;float: left;">
              <img v-for="(item, index) in scope.row.sliderUrls" :key="index" :src="item" width="50" />
          </div>
      </el-table-column>
      <el-table-column prop="name" label="商品名称" width="160" />
      <el-table-column prop="brandName" label="品牌" />
      <el-table-column prop="category1Name" label="一级分类" />
      <el-table-column prop="category2Name" label="二级分类" />
      <el-table-column prop="category3Name" label="三级分类" />
      <el-table-column prop="unitName" label="计量单位" />
      <el-table-column prop="status" label="状态" #default="scope">
          {{
              scope.row.status == 0
              ? '未上架'
              : scope.row.status == 1
                  ? '上架'
                  : '下架'
          }}
      </el-table-column>
      <el-table-column prop="auditStatus" label="审核状态" #default="scope">
          {{
              scope.row.auditStatus == 0
              ? '未审核'
              : scope.row.auditStatus == 1
                  ? '通过'
                  : '驳回'
          }}
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" #default="scope">
          <el-button type="primary" size="small" @click="editShow(scope.row)" style="padding: 5px; margin-left: 5px;">
              修改
          </el-button>
          <el-button type="danger" size="small" @click="remove(scope.row.id)" style="padding: 5px; margin-left: 5px;">
              删除
          </el-button>
          <el-button v-if="scope.row.auditStatus == 0 || scope.row.auditStatus == -1" type="success" size="small"
              @click="audit(scope.row.id)" style="padding: 5px; margin-left: 5px;">
              审批
          </el-button>
          <el-button v-if="scope.row.auditStatus == 1 && (scope.row.status == 0 || scope.row.status == -1)
              && scope.row.status == 0" type="warning" size="small" @click="updateStatus(scope.row.id, 1)"
              style="padding: 5px; margin-left: 5px;">
              上架
          </el-button>
          <el-button v-if="scope.row.auditStatus == 1 &&
              (scope.row.status == 0 || scope.row.status == 1) && scope.row.status == 1
              " type="warning" plain size="small" @click="updateStatus(scope.row.id, -1)"
              style="padding: 5px; margin-left: 5px;">
              下架
          </el-button>
      </el-table-column>
  </el-table>

  <el-pagination v-model:current-page="pageParams.page" v-model:page-size="pageParams.limit"
      :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  <el-dialog v-model="dialogVisible" title="添加或修改" width="80%">
      <el-form label-width="120px" style="margin-top: 10px;" :label-position="labelPosition">
          <el-collapse v-model="activeNames">
              <el-collapse-item title="商品基本信息" name="productBaseInfo">
                  <el-form-item label="商品名称">
                      <el-input v-model="product.name" />
                  </el-form-item>
                  <el-form-item label="分类">
                      <el-cascader style="width: 100%;" :props="categoryProps" v-model="categoryIdList"
                          @change="categoryChange" />
                  </el-form-item>
                  <el-form-item label="品牌">
                      <el-select class="m-2" placeholder="选择品牌" v-model="product.brandId" style="width: 100%;">
                          <el-option v-for="item in categoryBrandList" :key="item.id" :label="item.name"
                              :value="item.id" />
                      </el-select>
                  </el-form-item>
                  <el-form-item label="商品单元">
                      <el-select v-model="product.unitName" style="width: 100%;" class="m-2" placeholder="商品单元">
                          <el-option v-for="item in unitList" :key="item.id" :label="item.name" :value="item.name" />
                      </el-select>
                  </el-form-item>

                  <el-form-item label="轮播图">
                      <el-upload v-model:file-list="fileList" action="http://localhost:8501/admin/system/fileUpload"
                          list-type="picture-card" multiple :on-success="handleSliderSuccess" :on-remove="handleRemove"
                          :headers="headers">
                          <el-icon>
                              <Plus />
                          </el-icon>
                      </el-upload>
                  </el-form-item>
              </el-collapse-item>

              <el-collapse-item title="商品SKU信息" name="skuInfo">
                  <el-form-item label="选择规格">
                      <el-select :disabled="product.id != '' && product.id != undefined" v-model="product.specValue"
                          style="width: 100%;" class="m-2" placeholder="选择规格" size="default"
                          @change="changeSpecValueList">
                          <el-option v-for="item in specList" :key="item.specValue" :label="item.specName"
                              :value="item.specValue" />
                      </el-select>
                  </el-form-item>

                  <div class="specValue" v-for="(item, index) in specValueList" :key="index">
                      <span class="tag-group__title">{{ item.key }}</span>
                      <el-tag class="tag-group__title" type="success" effect="dark"
                          v-for="(specValue, index) in item.valueList" :key="index">
                          {{ specValue }}
                      </el-tag>
                  </div>

                  <el-form-item label="商品SKU">
                      <el-table :data="product.productSkuList" border style="width: 100%">
                          <el-table-column prop="skuSpec" label="规格" width="180" />
                          <el-table-column label="图片" #default="scope" width="80">
                              <el-upload class="avatar-uploader" action="http://localhost:8501/admin/system/fileUpload"
                                  :show-file-list="false" :on-success="(response, uploadFile, fileList) => handleSkuSuccess(response, uploadFile, fileList, scope.row)
                                      " :headers="headers">
                                  <img v-if="scope.row.thumbImg" :src="scope.row.thumbImg" class="avatar" />
                                  <el-icon v-else class="avatar-uploader-icon">
                                      <Plus />
                                  </el-icon>
                              </el-upload>
                          </el-table-column>
                          <el-table-column label="售价" #default="scope">
                              <el-input v-model="scope.row.salePrice" />
                          </el-table-column>
                          <el-table-column label="市场价" #default="scope">
                              <el-input v-model="scope.row.marketPrice" />
                          </el-table-column>
                          <el-table-column label="成本价" #default="scope">
                              <el-input v-model="scope.row.costPrice" />
                          </el-table-column>
                          <el-table-column label="库存数" #default="scope">
                              <el-input v-model="scope.row.stockNum" />
                          </el-table-column>
                          <el-table-column label="重量" #default="scope">
                              <el-input v-model="scope.row.weight" />
                          </el-table-column>
                          <el-table-column label="体积" #default="scope">
                              <el-input v-model="scope.row.volume" />
                          </el-table-column>
                      </el-table>
                  </el-form-item>


              </el-collapse-item>
              <el-collapse-item title="商品详情信息" name="productDetails">
                  <el-form-item label="详情图片">
                      <el-upload v-model:file-list="detailsFileList"
                          action="http://localhost:8501/admin/system/fileUpload" list-type="picture-card" multiple
                          :on-success="handleDetailsSuccess" :on-remove="handleDetailsRemove" :headers="headers">
                          <el-icon>
                              <Plus />
                          </el-icon>
                      </el-upload>
                  </el-form-item>

              </el-collapse-item>
              <el-collapse-item title="保存修改数据" name="submit" :disabled="true">
                  <el-form-item>
                      <el-button type="primary" @click="saveOrUpdate">提交</el-button>
                      <el-button @click="dialogVisible = false">取消</el-button>
                  </el-form-item>
              </el-collapse-item>
          </el-collapse>
      </el-form>
  </el-dialog>

  <el-dialog v-model="dialogAuditVisible" title="审批" width="80%">
      <el-form :model="product" label-width="120px" style="margin-top: 10px;">
          <el-divider />
          <span style="margin-bottom: 5px;">商品基本信息</span>
          <el-row>
              <el-col :span="12">
                  <el-form-item label="商品名称">
                      {{ product.name }}
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="分类">
                      {{ product.category1Name }} => {{ product.category2Name }} =>
                      {{ product.category3Name }}
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                  <el-form-item label="品牌">
                      {{ product.brandName }}
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="计量单位">
                      {{ product.unitName }}
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                  <el-form-item label="创建时间">
                      {{ product.createTime }}
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="状态">
                      {{
                          product.auditStatus == 0
                          ? '未审核'
                          : product.auditStatus == 1
                              ? '通过'
                              : '驳回'
                      }}
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="24">
                  <el-form-item label="轮播图">
                      <img v-for="(item, index) in sliderUrlList" :key="index" :src="item" style="width: 50px;" />
                  </el-form-item>
              </el-col>
          </el-row>

          <el-divider />
          <span style="margin-bottom: 5px;">商品SKU信息</span>
          <el-form-item label="商品SKU">
              <el-table :data="product.productSkuList" border style="width: 100%">
                  <el-table-column prop="skuSpec" label="规格" width="180" />
                  <el-table-column label="图片" #default="scope" width="80">
                      <img :src="scope.row.thumbImg" style="width: 80px;" />
                  </el-table-column>
                  <el-table-column label="售价" prop="salePrice" />
                  <el-table-column label="市场价" prop="marketPrice" />
                  <el-table-column label="成本价" prop="costPrice" />
                  <el-table-column label="库存数" prop="stockNum" />
                  <el-table-column label="重量" prop="weight" />
                  <el-table-column label="体积" prop="volume" />
              </el-table>
          </el-form-item>

          <el-divider />
          <span style="margin-bottom: 5px;">商品详情信息</span>
          <el-form-item label="详情图片">
              <img v-for="(item, index) in detailsImageUrlList" :key="index" :src="item" style="width: 80px;" />
          </el-form-item>
          <el-form-item>
              <el-button type="success" size="large" @click="updateAuditStatus(product.id, 1)">
                  通过
              </el-button>
              <el-button type="success" size="large" plain @click="updateAuditStatus(product.id, -1)">
                  驳回
              </el-button>
              <el-button size="large" @click="dialogAuditVisible = false">
                  取消
              </el-button>
          </el-form-item>
      </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { FindAllBrand } from '@/api/brand.js'
import { FindCategoryByParentId } from '@/api/category.js'
import { GetProductPageList, SaveProduct, UpdateProductById, GetProductById, DeleteProductById, UpdateProductStatus, UpdateProductAuditStatus } from '@/api/product.js'
import { FindBrandByCategoryId } from '@/api/categoryBrand.js'
import { FindAllProductUnit } from '@/api/productUnit.js'
import { FindAllProductSpec } from '@/api/productSpec.js'
import { useApp } from '@/pinia/modules/app'
import { ElMessage, ElMessageBox } from 'element-plus'

// ----------------------------------------------------分页列表查询 start --------------------------------------------------------------------------
// 品牌列表数据模型
const brandList = ref([])

// 分类列表
const props = {
  lazy: true,
  value: 'id',
  label: 'name',
  leaf: 'leaf',
  checkStrictly: true,
  async lazyLoad(node, resolve) {   // 加载数据的方法
      if (typeof node.value == 'undefined') node.value = 0
      const { data } = await FindCategoryByParentId(node.value)
      data.forEach(function (item) {       //hasChildren判断是否有子节点
          item.leaf = !item.hasChildren
      })
      resolve(data)  // 返回数据  
  }
};
const categoryProps = ref(props)

// 选中的数据模型
const queryDto = ref({ brandId: '', category1Id: '', category2Id: '', category3Id: '' })
const searchCategoryIdList = ref([])

//分页数据
const pageParamsForm = {
  page: 1, // 页码
  limit: 10, // 每页记录数
}
const pageParams = ref(pageParamsForm)

// 表格数据模型
const list = ref([])

// 总记录数数据模型
const total = ref(0)

// 钩子函数
onMounted(async () => {
  const { data } = await FindAllBrand()
  brandList.value = data
  fetchData()
})

//页面变化
const handleSizeChange = size => {
  pageParams.value.limit = size
  fetchData()
}
const handleCurrentChange = number => {
  pageParams.value.page = number
  fetchData()
}

//重置
const resetData = () => {
  queryDto.value = {}
  searchCategoryIdList.value = []
  fetchData()
}

// 分页列表查询方法
const fetchData = async () => {

  // 处理三级分类的id
  if (searchCategoryIdList.value.length == 1) {
      queryDto.value.category1Id = searchCategoryIdList.value[0]
  }

  if (searchCategoryIdList.value.length == 2) {
      queryDto.value.category1Id = searchCategoryIdList.value[0]
      queryDto.value.category2Id = searchCategoryIdList.value[1]
  }

  if (searchCategoryIdList.value.length == 3) {
      queryDto.value.category1Id = searchCategoryIdList.value[0]
      queryDto.value.category2Id = searchCategoryIdList.value[1]
      queryDto.value.category3Id = searchCategoryIdList.value[2]
  }

  // 请求后端接口
  const { data } = await GetProductPageList(pageParams.value.page, pageParams.value.limit, queryDto.value)
  data.list.forEach(item => {
      item.sliderUrls = item.sliderUrls.split(',')
  })

  // 将响应结果数据设置给对应的属性模型
  list.value = data.list
  total.value = data.total
}

// 控制对话框是否展示的数据模型
const dialogVisible = ref(false)

// 表单label对其方式
const labelPosition = ref('top')

// 对话框激活的面板
const activeNames = ref(['productBaseInfo', 'skuInfo', 'productDetails', 'submit'])

// 表单数据模型
const defaultForm = {
  id: '',
  name: '',
  brandId: '',
  category1Id: '',
  category2Id: '',
  category3Id: '',
  unitName: '',
  sliderUrls: '',
  specValue: '',
  productSkuList: [],
  detailsImageUrls: '',
}
const product = ref(defaultForm)


//进入添加
const addShow = () => {
  props.checkStrictly = false
  dialogVisible.value = true
  //清空
  fileList.value = []
  categoryIdList.value = []
  detailsFileList.value = []
  sliderUrlList.value = []
  specValueList.value = []
  product.value = {}
  fetchProductUnit()
  fetchProductSpect()
}

// 分类级联选择器选中数据以后的数据模型
const categoryIdList = ref([])

// 分类级联选择器数据发送改变以后的事件处理函数
const categoryChange = async () => {
  if (categoryIdList.value.length == 3) {
      product.value.category1Id = categoryIdList.value[0]
      product.value.category2Id = categoryIdList.value[1]
      product.value.category3Id = categoryIdList.value[2]
      const { data } = await FindBrandByCategoryId(categoryIdList.value[2])
      categoryBrandList.value = data
      if (product.value.id) {
          product.value.brandId = ''
      }
  }
}

// 定义品牌的数据模型
const categoryBrandList = ref([])

// 商品单元的数据模型
const unitList = ref([])

// 查询所有的商品单元
const fetchProductUnit = async () => {
  const { data } = await FindAllProductUnit()
  unitList.value = data
}


// 商品规格数据数据模型
const specList = ref([])

// 查询产品规格数据
const fetchProductSpect = async () => {
  const { data } = await FindAllProductSpec()
  specList.value = data
}


const saveOrUpdate = () => {

  console.log('submit!' + product.value)
  product.value.sliderUrls = sliderUrlList.value.join(',')
  product.value.detailsImageUrls = detailsImageUrlList.value.join(',')
  if (!product.value.id) {
      saveData()
  } else {
      updateData()
  }
}

// 新增
const saveData = async () => {
  await SaveProduct(product.value)
  dialogVisible.value = false
  ElMessage.success('操作成功')
  fetchData()
}

// 修改
const updateData = async () => {
  console.log(product.value)
  await UpdateProductById(product.value)
  dialogVisible.value = false
  ElMessage.success('操作成功')
  fetchData()
}

// 展示选择的规则数据
const specValueList = ref([])
const changeSpecValueList = () => {
  specValueList.value = JSON.parse(product.value.specValue)
  const specValueArr = []
  specValueList.value.forEach((item, index) => {
      specValueArr.push(item.valueList)
  })


  // last为上次运算的结果，current为数组中的当前元素
  var result = specValueArr.reduce((last, current) => {
      const array = [];
      last.forEach(par1 => {
          current.forEach(par2 => {
              array.push(par1 + " + " + par2);
          });
      });
      return array;
  });

  console.log(result)
  product.value.productSkuList = []
  result.forEach(function (item) {
      product.value.productSkuList.push({
          skuSpec: item,
          price: 0,
      })
  })

}

// 上传商品轮播图图片
const sliderUrlList = ref([])
const headers = {
  token: useApp().authorization.token     // 从pinia中获取token，在进行文件上传的时候将token设置到请求头中
}
const handleRemove = (uploadFile, uploadFiles) => {
  sliderUrlList.value.splice(sliderUrlList.value.indexOf(uploadFile.url), 1)
}
const fileList = ref([])
const handleSliderSuccess = (response, uploadFile) => {
  sliderUrlList.value.push(response.data)
}


//sku图片
const handleSkuSuccess = (response, uploadFile, fileList, row) => {
  row.thumbImg = response.data
}


// 上传商品详情图片
const detailsFileList = ref([])
const handleDetailsRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  detailsImageUrlList.value.splice(detailsImageUrlList.value.indexOf(uploadFile.url), 1)
  console.log(sliderUrlList.value)
}
const detailsImageUrlList = ref([])
const handleDetailsSuccess = (response, uploadFile) => {
  console.log(response)
  detailsImageUrlList.value.push(response.data)
  console.log(detailsImageUrlList.value)
}


//进入修改
const editShow = row => {
  getById(row.id)
  props.checkStrictly = false
  dialogVisible.value = true
}

const getById = async id => {
  const { data } = await GetProductById(id)
  product.value = data
  // eslint-disable-next-line no-debugger
  console.log(product.value)

  //分类赋值
  categoryIdList.value = [product.value.category1Id, product.value.category2Id, product.value.category3Id]

  //处理图片
  fileList.value = []
  sliderUrlList.value = product.value.sliderUrls.split(',')
  sliderUrlList.value.forEach(url => {
      fileList.value.push({ url: url })
  })

  // 处理规格数据
  specValueList.value = JSON.parse(product.value.specValue)

  //处理sku
  // product.value.productSkuList.forEach(sku => {
  //   sku.skuSpec = sku.skuSpec.split(',').join(' * ')
  //   sku.skuSpecList = sku.skuSpec.split(',')
  // })

  //处理详情图片
  detailsFileList.value = []
  detailsImageUrlList.value = product.value.detailsImageUrls.split(',')
  detailsImageUrlList.value.forEach(url => {
      detailsFileList.value.push({ url: url })
  })

  //加载分类品牌
  getBrand()
  fetchProductUnit()
  fetchProductSpect()
}

const getBrand = async () => {
  const { data } = await FindBrandByCategoryId(categoryIdList.value[2])
  categoryBrandList.value = data
}

//删除
const remove = async id => {
  console.log('removeDataById:' + id)
  ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
  })
      .then(async () => {
          await DeleteProductById(id)
          ElMessage.success('删除成功')
          fetchData()
      })
      .catch(() => {
          ElMessage.info('取消删除')
      })
}

const dialogAuditVisible = ref(false)
const audit = async id => {
  const { data } = await GetProductById(id)
  product.value = data

  //分类赋值
  categoryIdList.value = [product.value.category1Id, product.value.category2Id, product.value.category3Id]

  //处理图片
  fileList.value = []
  sliderUrlList.value = product.value.sliderUrls.split(',')
  sliderUrlList.value.forEach(url => {
      fileList.value.push({ url: url })
  })

  // 处理规格数据
  specValueList.value = JSON.parse(product.value.specValue)

  //处理详情图片
  detailsFileList.value = []
  detailsImageUrlList.value = product.value.detailsImageUrls.split(',')
  detailsImageUrlList.value.forEach(url => {
      detailsFileList.value.push({ url: url })
  })

  //加载分类品牌
  getBrand()
  fetchProductUnit()
  fetchProductSpect()

  dialogAuditVisible.value = true
}

const updateAuditStatus = async (id, auditStatus) => {
  await UpdateProductAuditStatus(id, auditStatus)
  dialogAuditVisible.value = false
  ElMessage.success('操作成功')
  fetchData()
}

//上下架
const updateStatus = async (id, status) => {
  await UpdateProductStatus(id, status)
  dialogAuditVisible.value = false
  ElMessage.success('操作成功')
  fetchData()
}

</script>

<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.tag-group__title {
  margin-right: 10px;
  /* 调整元素之间的水平间距 */
}

.specValue {
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 14px;
}

.avatar-uploader .avatar {
  width: 50px;
  height: 50px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  text-align: center;
}
</style>